<template>
  <div class="home-singer">
    <div class="fix-container">
      <CenterTitle>歌手分类</CenterTitle>
      <van-dropdown-menu active-color="#1c8cd7" duration="0.25">
        <!-- 类型 -->
        <van-dropdown-item v-model="active1" :options="type" />

        <!-- 区域 -->
        <van-dropdown-item v-model="active2" :options="area" />
      </van-dropdown-menu>
    </div>

    <section>
      <SmallTitle>热门歌手</SmallTitle>

      <SingerItem
        v-for="item in artists"
        :key="item.id"
        :item="item"
        @click.native="toSingerDetail(item.id)"
      />
    </section>
  </div>
</template>

<script>
import CenterTitle from "@/components/slot/CenterTitle.vue";
import SmallTitle from "@/components/slot/SmallTitle.vue";
import SingerItem from "@/components/basics/SingerItem.vue";
export default {
  components: {
    CenterTitle,
    SmallTitle,
    SingerItem,
  },
  name: "HomeSinger",
  data() {
    const type = [
      { text: "全部", value: -1 },
      { text: "男歌手", value: 1 },
      { text: "女歌手", value: 2 },
      { text: "乐队", value: 3 },
    ];
    const area = [
      { text: "全部", value: -1 },
      { text: "华语", value: 7 },
      { text: "欧美", value: 96 },
      { text: "日本", value: 8 },
      { text: "韩国", value: 16 },
      { text: "其他", value: 0 },
    ];

    return {
      active1: -1,
      type,
      active2: -1,
      area,
      api_type: -1,
      api_area: -1,
      artists: [],
      showFilter: false,
    };
  },
  created() {
    this.reload(this.api_type, this.api_area);
  },

  methods: {
    /**
     * 重新加载数据
     * @param {number} type 歌手类型
     * @param {number} area 歌手区域
     */
    async reload(type, area) {
      const res = await this.axios.get(
        `/artist/list?type=${type}&area=${area}`
      );
      this.artists = res.data.artists;
    },

    /**
     * 进入歌手详情页
     * @param {number} id 歌手id
     */
    toSingerDetail(id) {
      this.$router.push({ path: "/singer_detail", query: { id } });
    },
  },

  watch: {
    // 类型变化
    active1(new_type) {
      this.reload(new_type, this.api_area);

      // 需要重新赋值
      this.api_type = new_type;

      // 模拟正在切换的提示
      this.$toast({
        type: "loading",
        message: "切换中",
      });
    },

    // 区域变化
    active2(new_area) {
      this.reload(this.api_type, new_area);

      // 需要重新赋值
      this.api_area = new_area;

      // 模拟正在切换的提示
      this.$toast({
        type: "loading",
        message: "切换中",
      });
    },
  },
};
</script>

<style lang="less" scoped>
.home-singer {
  width: 100%;

  .fix-container {
    width: 100%;
    height: 80px;
    position: fixed;
    top: 0;
    z-index: 1;
    background-color: #fff;
  }

  section {
    width: 98%;
    margin: 0 auto;
    margin-top: 80px;
  }
}
</style>
